﻿import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { BrowserRouter as Router, Route, Switch, NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import sendJpg from './imgs/sendmsg.jpg'
import './App.css'
import modules from './Modules'
import { EnvContext } from './common/EnvContext'
import { loadSendState, loadAuthorizeState, loadHistoryState, loadStatisticState } from './svc/service-broker'
import { updSendState, updAuthorizeState, updHistoryState, updStatisticState } from './loader/actions' 

class App extends Component {
    static propTypes = {
        buffer: PropTypes.object.isRequired,
        updateSendState: PropTypes.func.isRequired,
        updateAuthorizeState: PropTypes.func.isRequired,
        updateStatisticState: PropTypes.func.isRequired,
        updateHistoryState: PropTypes.func.isRequired
    }
    navClicked = async (url) => {
        var { send, authorize } = this.props.buffer;
        switch (url) {
            case '/send':
                if (!send.college || !send.college.departments) {
                    this.props.updateSendState(await loadSendState());
                }
                break;
            case '/authorize':
                if (!authorize.college || !authorize.college.departments) {
                    this.props.updateAuthorizeState(await loadAuthorizeState());
                }
                break;
            case '/statistic':
                this.props.updateStatisticState(await loadStatisticState());
                break;
            case '/history':
                this.props.updateHistoryState(await loadHistoryState());
                break;
            default:
                break;
        }
    }
    render() {
        return (
            <EnvContext.Consumer>
                {({ modules: mcs, user }) => {
                    const availableModules = modules.filter((_, idx) => mcs[idx] === true);
                    return (
                        <Router>
                            <main className='main'>
                                <div className='content'>
                                    <div className='header'>
                                        <img alt='' src={sendJpg}></img>
                                        <div className='user'>用户：{user.name}</div>
                                        <div className='header-right-end'>
                                            <div className='route-bar'>
                                                {availableModules.map((m, idx) => (
                                                    <span
                                                        key={idx}
                                                        onClick={() => this.navClicked(m.to)}>
                                                        <NavLink
                                                            key={idx}
                                                            to={m.to}
                                                            className='link'
                                                            activeClassName='active-link'>{m.txt}
                                                        </NavLink>
                                                    </span>))
                                                }
                                            </div>
                                            {/*<div className='test'>...测试...测试...测试...</div>*/}
                                            <h1 className='title'>移动设备消息发送终端</h1>
                                        </div>
                                    </div>
                                    <div className='hline' />
                                    <div className='module'>
                                        <Switch>
                                            {availableModules.map((m, idx) => (
                                                <Route exact
                                                    key={idx}
                                                    path={m.to}
                                                    component={m.com}
                                                />
                                            ))}
                                        </Switch>
                                    </div>
                                </div>
                            </main>
                        </Router>)
                }}
            </EnvContext.Consumer>
        )
    }
}
const mapState2Props = state => ({ buffer: state })
const mapDispatch2Props = dispatch => ({
    updateSendState: data => dispatch(updSendState(data)),
    updateAuthorizeState: data => dispatch(updAuthorizeState(data)),
    updateStatisticState: data => dispatch(updStatisticState(data)),
    updateHistoryState: data => dispatch(updHistoryState(data))
});
export default connect(mapState2Props, mapDispatch2Props)(App);
